<template>
  <view class="wechatWrap">
    <view class="wechatTopUser">
      <uv-image
        :showLoading="true"
        :src="src"
        width="48rpx"
        height="48rpx"
        shape="circle"
      ></uv-image>
      Tmmmmmm
    </view>
    <view class="wechatTime">3月11日 19:17</view>
    <view class="wechatMessageItem">
      <view class="wechatMessageItemHeadImg">
        <uv-image
          :showLoading="true"
          :src="src"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></uv-image>
      </view>
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardImg">
            <uv-image
              :showLoading="true"
              :src="src"
              width="110rpx"
              height="110rpx"
              bgColor="#FFFFFF"
            ></uv-image>
          </view>
          <view class="cardText">
            <view class="title uv-line-2">
              内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题
            </view>
            <view class="desc">通过以上链接，请求与您交换微信号</view>
          </view>
        </view>
        <view class="confirmBtn">确认交换</view>
      </view>
    </view>
    <view class="wechatTime">3月11日 19:17</view>
    <view class="wechatMessageItem">
      <view class="wechatMessageItemHeadImg">
        <uv-image
          :showLoading="true"
          :src="src"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></uv-image>
      </view>
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardText">
            <view class="title uv-line-2">我的微信号：1234567890</view>
          </view>
        </view>
        <view class="confirmBtn">点击复制</view>
      </view>
    </view>
    <view class="wechatTime">3月11日 19:17</view>
    <view class="wechatMessageItem right">
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardText">
            <view class="title uv-line-2">我的微信号：1234567890</view>
          </view>
        </view>
      </view>
      <view class="wechatMessageItemHeadImg">
        <uv-image
          :showLoading="true"
          :src="src"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></uv-image>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {},
});
</script>

<style lang="scss">
.wechatTopUser {
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f3f3f3;
  font-size: 24rpx;
  color: #666666;
  background-color: #f3f3f3;
  margin-bottom: 70rpx;
}
.wechatTime {
  font-size: 20rpx;
  color: #666666;
  text-align: center;
  margin-bottom: 8rpx;
}
.wechatMessageItem {
  display: flex;
  margin-bottom: 40rpx;
}
.wechatMessageItemHeadImg {
  margin-right: 16rpx;
  margin-left: 30rpx;
}
.wechatMessageItemCard {
  background-color: #f3f3f3;
  border-radius: 15rpx;
  padding: 30rpx;
  max-width: 564rpx;
  margin-top: 24rpx;
}
.cardBaseData {
  display: flex;
  align-items: center;
}
.cardImg {
  margin-right: 16rpx;
}
.cardText {
  .title {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 8rpx;
  }
  .desc {
    font-size: 22rpx;
    color: #666;
  }
}
.confirmBtn {
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  color: #00a0e9;
  padding-top: 24rpx;
  border-top: 1px dashed #dcdcdc;
  margin-top: 24rpx;
}

.wechatMessageItem.right {
  justify-content: flex-end;
}
.right .wechatMessageItemHeadImg {
  margin-left: 16rpx;
  margin-right: 30rpx;
}
.right .wechatMessageItemCard {
  background-color: #BEE9FF;
}
</style>
